<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lab 2 exercise 6</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body style="background-color:#ffffff; color:#000000; font-size:1.5em; min-width: 1200px;" id="example">
    <a name="TOP"></a>
    
    <nav style="background-color: #2a16c3; color: white; position: absolute; 
                left: 0; top: 120px;
                width: 200px; height: 500px;
                padding: 20px; z-index: 50;">
        <p>Yang Gao 30454489</p>
    </nav>
    
    <header style="position: absolute; top: 0; left: 0; width: 100%; height: 120px;
                   background-color: #f0f0f0; z-index: 100;
                   padding: 20px; border-bottom: 2px solid #ccc;">
        <h1>Lab 2 - Exercise 6</h1>
        <p>And here's some words. This text comes last in the code, but appears top of the page.</p>
    </header>
	
	<main style="position: absolute; right: 50px; top: 130px;
				background-color: rgb(140, 32, 43); width: 50%; max-width: 600px;
				padding: 20px; height: 300px; z-index: 40;">
		<p>And this will be the main content block. I have not used another HTML tag beyond the structural semantic elements and some div elements on this page to lay it out. No <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics" style="font-weight: bold">tables</a>, no transparent images; just <strong>div</strong>s and style commands.</p>
		<p>Notice how this layer looks like a table, but it is positioned above the layer to the left.</p>
	</main>

    <section style="position: absolute; left: 220px;
                   top: 130px;
                   background-color: rgb(27, 216, 147); width: 350px; height: 200px;
                   padding: 20px; border: red 2px dashed; z-index: 40;">
        <p>And yet another layer goes below the main content.</p>
        <p>Notice the tasteful border? Yes, me neither</p>
    </section>
	
    <div style="position: absolute; left: 10px; bottom: 20px; background-color: #e01de0; padding: 20px; color: white; border: 5px white groove; font-size: 13pt;">
		<p>I could go on, but I think you see the brilliance of these things.</p>
	</div>
	
    <div style="position: absolute; left: 220px; top: 360px;
            background-color: rgb(19, 182, 223); width: 350px; height: 180px;
            padding: 15px; color: white; border: 10px black double; z-index: 30;">
    	<p>Make sure you view the of this page to properly understand what's going on here.</p>
	</div>
	
    <div style="position: absolute; right: 50px; top: 620px;
                background-color: rgb(211, 94, 26); width: 250px; padding: 15px; color: white; z-index: 30;">
        <p>Now, try resizing this window by pulling the corner. The layers will move around as the page sides get closer to them.</p>
    </div>

	<aside style="position: absolute; right: 50px; top: 450px;
					background-color: rgb(21, 215, 99); color: white; width: 50%; max-width: 600px;
					padding: 20px; height: 150px; z-index: 40;">
		<p>with thanks to www.yourhtmlsource.com for providing this code as part of one of their examples. And apologies for "butchering" it!</p>
	</aside>
</body>
</html>